<template>
  <view class="fenlei">
    <view class="fenHeader flex flex-align">
      <image src="@/static/fenlei/fenlei01.png" mode="scaleToFill" />
      <input type="text" v-model="keyword" placeholder="输入关键词搜索">
      <button>搜索</button>
    </view>
    <view class="flenNav">
      <scroll-view scroll-x="true" class="scroll-Y" :show-scrollbar="false" scroll-with-animation="true" :scroll-into-view=toview>
          <view :class="swIndex==index?'scroll-Img active':'scroll-Img'" v-for="(item,index) in listInfo" :key="index" @click="tabIndex(index)" :id="'pro_'+index">
            <image :src="getImgUrl(item.icon)" mode="scaleToFill" />
            <view class="title one-omit">{{item.name}}</view>
          </view>
				</scroll-view>
    </view>
    <view class="fneleiTwo flex" v-if="leftInfo">
      <view class="left">
        <view class="list flex flex-align flex-center" v-for="(item,index) in leftInfo" :key="index" :class="tabInd==index?'active':''" @click="tabTwo(index)">
          <view class="one-omit ">{{item.name}}</view>
        </view>
      </view>
      <view class="right">
        <view class="list flex" v-if="dataInfo.length!=0" v-for="(item,index) in dataInfo" :key="index" @click="menuJump({is_tab: false,link: '/pages/shop/detail?idcode='+item.id,link_type: 1})">
          <view class="leftImg">
            <image :src="getImgUrl(item.goods_cover)" mode="scaleToFill" />
            <image v-if="item.return_coupon" class="fanquan" src="/static/fenlei/fenlei03.png" mode="scaleToFill" />
          </view>
          <view class="flex flex-direction flex-bt" style="width: 100%;">
            <view>
              <view class="title one-omit">{{item.goods_name}}</view>
              <view class="miaoshu one-omit">{{item.remark}}</view>
            </view>
            
            <view class="flex flex-bt flex-align">
              <view class="price">¥{{item.price_selling}} <text v-if="item.spec_type==1">起</text></view>
              <view class="sockt">{{item.sales}}已售</view>
            </view>
          </view>
        </view>
        <view class="nodata" v-else>
          <noData acImg="/static/nodata/noshop.png" content="暂无数据" width="300rpx" color="#969799"></noData>
        </view>
      </view>
    </view>
    <view class="nodata" v-else>
      <noData acImg="/static/nodata/noshop.png" content="暂无数据" width="400rpx" color="#969799"></noData>
    </view>
    <TabBar :tabBarShow="1"></TabBar>
  </view>
</template>

<script setup lang="ts">
import { goodsCate, goodsList} from '@/api/login';
import TabBar from '@/components/TabBar/TabBar.vue';
import { onLoad, onReady} from "@dcloudio/uni-app";
import { getImgUrl,menuJump} from "@/utils/tools"
import noData from '@/components/noData.vue';
import { ref } from 'vue';
onReady(() => {
  uni.hideTabBar();
});
onLoad(() => {
  getList()
});
const swIndex = ref(0)
const toview = ref('')
const keyword = ref('')
const tabInd = ref(0)
const class_id = ref('')
const dataInfo = ref<Recordable>([])
function tabIndex(_e: any){
  swIndex.value = _e
  toview.value = 'pro_'+_e
  leftInfo.value = listInfo.value[_e].children
  if(leftInfo.value){
    tabInd.value = 0
    class_id.value = leftInfo.value[tabInd.value].id
    getDetail()
  }
 
}
function tabTwo(e: any){
  class_id.value = leftInfo.value[e].id
  tabInd.value =e
  getDetail()
}
const listInfo = ref()
const leftInfo = ref()
const getList = async () => {
  listInfo.value = await goodsCate()
  leftInfo.value = listInfo.value[0].children
  if(leftInfo.value){
    leftInfo.value = listInfo.value[0].children
    class_id.value = leftInfo.value[0].id
    getDetail()
  }
 
  // 调用接口
  // listInfo.value = res.data.list
}
async function getDetail() {
  let data = {page:1,page_size:100,class_id:class_id.value}
  goodsList(data).then((res:any)=>{
    dataInfo.value = res.list
  })
}
</script>
 
<style scoped lang="scss">
.fenlei{padding-top: 20rpx;}
 .fenHeader{background: #fff;border-radius: 80rpx;height: 80rpx;padding: 0 20rpx;
  margin: 0 26rpx 26rpx;
  image{width: 48rpx;height: 48rpx;}
  input{font-size: 26rpx;width: 500rpx;}
  button{padding: 0rpx 30rpx;background:#FE7431;color: #fff;border-radius: 60rpx;font-size: 24rpx;}
 }
 .flenNav{
  .scroll-Img{display: inline-block;margin-left: 20rpx;
        width: 105rpx;height: 105rpx;
        image{width: 105rpx;height: 105rpx;border: 2px solid #F5F6F7;border-radius: 10rpx;}
        .title{color: #969799;font-size: 26rpx;padding-left: 5rpx;width: 110rpx;text-align: center;}
      }
  .scroll-Img.active{
    image{border: 2px solid #FE7431;}
    .title{color: #FE7431}
  }
  
 }
 .fneleiTwo{
  .left{height: calc(100vh - 455rpx);overflow-y: auto;overflow-x: hidden;
    .list{width: 180rpx;height: 104rpx;position: relative;border-left: 4rpx solid #F5F6F7;}
    .list .one-omit{padding:0 10rpx;}
    .list.active{background: #fff;}
    .list.active .one-omit{position: relative;border-left: 4rpx solid #FE7431;}
    
  }
  .right{width: calc(100vw - 180rpx);background: #fff;padding: 20rpx;height: calc(100vh - 455rpx);overflow-y: auto;
    box-sizing: border-box;
    .list{margin-bottom: 20rpx;
      .leftImg{position: relative;}
      image{width: 140rpx;height: 140rpx;margin-right: 20rpx;}
      .fanquan{position: absolute;top: 0;left: 0;width: 62rpx;height: 40rpx;}
      .miaoshu{color: #969799;font-size: 24rpx;margin-top: 10rpx;}
      .price{color: $uni-color-error;font-size: 32rpx;font-weight: bold;
        text{font-size: $uni-font-size-sm;font-weight: normal;}
      }
      .sockt{color: #969799;font-size: 24rpx;}
    }

    .list:last-child{margin-bottom: 0;}
  }
 }
 .scroll-Y{white-space: nowrap;width: 100%;padding-right: 20rpx;box-sizing: border-box;padding-bottom: 20rpx;}
 .nodata{padding-top: 10vh;}
</style>
